<template>
	<view>
		<view class="free-filter">
			<view 
				class='free-filter-title'
				v-for='item in filterList' :key='item.id'
			>
				{{ item.name }}
			</view>
		</view>
		<view class='free-list'>
			<view class='new-list'>
				<view 
					class='new-list-item'
					v-for='item in courseList'
					:key='item.id'
				>
					<view class='new-item-img'>
						<image :src="item.courseCover"></image>
					</view>
					<view class='new-item-main'>
						<view class='new-item-title'>{{ item.courseName }}</view>
						<view class='new-item-type'>{{ courseType(item.courseLevel) }}</view>
						<view class='new-item-total'>
							<view class='new-item-price' v-if='item.discountPrice==0'>
								<view>免费</view>
							</view>
							<view class='new-item-price' v-else>
								<view>限时优惠</view>
								<view class='new-item-discountPrice'>¥ {{ item.discountPrice }}</view>
							</view>
							<view class='new-item-number'>{{ courseNumber(item.clicks) }}人学习</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { freeCourse } from '@/api/course.js'
import { mixin } from '@/mixins/mixin.js'
export default{
	mixins:[ mixin ],
	data () {
		return {
			courseList:[],
			filterList:[
				{id:1,name:'综合推荐'},
				{id:2,name:'最新'},
				{id:3,name:'浏览最多'}
			],
			courseParams:{
				pageNum:1,
				pageSize:4,
				entity:{isFree:1}
			}
		}
	},
	mounted(){
		this.getCourse( this.courseParams );
	},
	methods:{
		getCourse( params ){
			freeCourse( params ).then(res=>{
				this.courseList = res.pageInfo.list;
			})
		}
	}
}
</script>

<style>
.free-filter{
	display: flex;
	padding:14rpx 0;
}
.free-filter-title{
	padding-left:44rpx;
	font-size: 28rpx;
	color: #A0A4AD;
}
.free-list{
	padding:14rpx;
}
.new-list-item{
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top:40rpx;
}
.new-list-item:after{
	content: '';
	position: absolute;
	bottom:-20rpx;
	margin-top:40rpx;
	width: 100%;
	border-bottom: 1px solid #000000;
	opacity: 0.15;
}
.new-item-img{
	width: 237rpx;
	height: 186rpx;
	border-radius: 12rpx;
	background-color: #ccc;
}
.new-item-img image{
	width: 100%;
	height: 100%;
	border-radius: 12rpx;
}
.new-item-main{
	flex:1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 186rpx;
	padding-left:23rpx;
}
.new-item-title{
	font-size: 29rpx;
	font-weight: 400;
	color: #191919;
}
.new-item-type{
	font-size: 24rpx;
	font-weight: 400;
	color: #C5C5C5;
}
.new-item-total{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.new-item-price{
	display: flex;
	font-size: 21rpx;
	color: #FF4B5C;
	font-weight: 600;
}
.new-item-number{
	font-size: 21rpx;
	font-weight: 400;
	color: #A0A4AD;
}
.new-item-discountPrice{
	padding-left:21rpx;
}
</style>